<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>我的代理</view>
				</view>
				<view class="flex j-end a-center place rule">
					<view>收益明细</view>
				</view>
			</view>
		</view>
		<view class="bannder rela">
			<view class="flex j-between a-center">
				<view class="flex col j-center a-center">
					<view class="num">112,234</view>
					<view class="name">累计收益（金币）</view>
				</view>
				<u-line length="32" color="#fff" direction="col"></u-line>
				<view class="flex col j-center a-center">
					<view class="num">1,354</view>
					<view class="name">今日收益（金币）</view>
				</view>
			</view>
			<view class="abso mx flex j-between a-center">
				<view class="flex col j-center a-center">
					<view class="num">大渡口区</view>
					<view class="name">重庆</view>
				</view>
				<view class="flex col j-center a-center">
					<view class="num">3434</view>
					<view class="name">区域会员</view>
				</view>
				<view class="flex col j-center a-center">
					<view class="num">1231</view>
					<view class="name">区域商家</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="panel flex a-center j-between">
				<view class="name">推广物料下载（2021-09-26）</view>
				<view class="down flex j-center a-center">下载</view>
			</view>
			<view class="panel flex a-center j-between">
				<view class="name">推广物料下载（2021-09-26）</view>
				<view class="down flex j-center a-center">下载</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			
		}
	},
	methods:{
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+10)+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #333;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 32%;}
	.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
}
.bannder{background: linear-gradient(226deg, #428BF7 0%, #246FDD 100%);overflow: hidden;height: 364rpx;
	box-shadow: 0px 12rpx 12rpx rgba(36, 111, 221, 0.16);border-radius: 16rpx;padding: 48rpx 140rpx;
	margin-top: 18rpx;color: #FFF;
	.num{font-size: 36rpx;font-weight: bold;}
	.name{font-size: 24rpx;margin-top: 24rpx;}
	.mx{height: 164rpx;left: 0;right:0;bottom: 0;background: rgba(255, 255, 255, .1);padding: 32rpx 70rpx;}
}
.list{color: #333;margin-top: 8rpx;
	.panel{background-color: #fff;border-radius: 16rpx;padding: 32rpx 24rpx;margin-top: 24rpx;
		.name{font-size: 28rpx;color: #333;font-weight: bold;}
		.down{width: 192rpx;height: 64rpx;color: #FFF;background-color: #246FDD;font-size: 28rpx;border-radius: 16rpx;}
	}
}
</style>
